<!DOCTYPE html>
<html>
<!-- 
from http://my.oschina.net/geomen/blog/75387
 -->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>swipe</title>
	<link rel="stylesheet" href="jquery.mobile-1.4.4.min.css">
	<script src="../scripts/jquery-2.0.3.min.js"></script>
	<script src="../scripts/jquery.mobile-1.4.4.js"></script>
	<script>

		$(function() {

			$("#listview1").bind("swipeleft", function() {

				$.mobile.changePage("#class-page", {
					transition : "slide"
				});

			});

			$("#listview2").bind("swiperight", function() {

				$.mobile.changePage("#index", {
					transition : "slide",
					reverse : true
				}, true, true);

			});

		});
	</script>
</head>
<body>     
	<!-- 第一个页面 -->  
    <div data-role="page" id="index">  
  
        <div data-role="content">  
            <ul data-role="listview" id="listview1">  
                <li>1</li>  
                <li>2</li>  
                <li>3</li>  
            </ul>  
        </div>  
  
    </div>  
    <!-- 第二个页面 -->  
    <div data-role="page" id="class-page">  
  
        <div data-role="content">  
            <ul data-role="listview" id="listview2">  
                <li>4</li>  
                <li>5</li>  
                <li>6</li>  
            </ul>  
        </div>  
  
    </div>  
</body>
</html>
